<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-02 17:04:52
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-20 11:26:25
 * @FilePath: \cxl-h5\src\pages\personalCenter\Index.vue
-->

<template>
    <section class="personal-center">
        <section class="info">
            <section class="head-image">
                <template v-if="wxUserInfo">
                    <img :src="wxUserInfo.headImgUrl" alt="" srcset="" />
                </template>
                <template v-else>
                    <img src="../../assets/images/icon_tx@3x.png" alt="" srcset="" />
                </template>
            </section>
            <section class="info-name">
                <p v-if="_userStore.isAdmin">{{ userInfo.companyName }}</p>
                <p v-else>{{ userInfo.name }}（{{ userInfo.companyName }}）</p>
                <span>
                    <img src="../../assets/images/icon_sj@2x.png" alt="" srcset="" v-if="userInfo.phone" />{{
                        userInfo.phone
                    }}
                </span>
            </section>
        </section>
        <section class="fn">
            <template v-for="(item, index) in list" :key="item.text">
                <section class="item" @click="onSkip(index)" v-if="item.visible">
                    <section class="icon"><img :src="item.icon" alt="" srcset="" />{{ item.text }}</section>
                    <section>
                        <span class="iconfont icon-arrow-right"></span>
                    </section>
                </section>
            </template>
        </section>
        <section
            class="btn"
            @click="
                () => {
                    confirmPopup.visible = true
                }
            "
        >
            <cxl-button bgColor="#fff" textColor="#FF5448">退出登录</cxl-button>
        </section>

        <!-- 退款提示弹窗 -->
        <confirmPopupVue
            v-model="confirmPopupRefund.visible"
            :title="confirmPopupRefund.title"
            :content="confirmPopupRefund.content"
            :cancelBtn="false"
            @confirm="
                () => {
                    confirmPopupRefund.visible = false
                }
            "
        ></confirmPopupVue>

        <!-- 确认弹窗 -->
        <confirmPopupVue
            v-model="confirmPopup.visible"
            :title="confirmPopup.title"
            :content="confirmPopup.content"
            :cancelBtn="true"
            @cancel="
                () => {
                    confirmPopup.visible = false
                }
            "
            @confirm="
                () => {
                    confirmPopup.visible = false
                    onLoginOut()
                }
            "
        ></confirmPopupVue>
    </section>
</template>

<script lang="ts" setup name="personalCenter">
import { onMounted, reactive } from 'vue'
import icon1 from '@/assets/images/icon_wdqb@3x.png'
// import icon2 from '@/assets/images/icon_gywm@3x.png'
import icon3 from '@/assets/images/icon_ysxy@3x.png'
import icon4 from '@/assets/images/icon_yhxy@3x.png'
import icon5 from '@/assets/images/sqkp.svg'
import icon6 from '@/assets/images/icon_ddjl.svg'
import { storage } from '@/store/sessionStorage'
import { http } from '@/axios'
import useWeixinSdk from '@/utils/WXSdk'
import { userStore } from '@/store/user.store'
import { useRouter } from 'vue-router'
import useJudgeLogin from '@/utils/judgeLogin'
import confirmPopupVue from '@/components/confirmPopup/Index.vue'
import { CxlMessage } from '@/components/message'

const _userStore = userStore()
const router = useRouter()
const list = reactive([
    { icon: icon6, visible: true, text: '查询记录', path: '/vehicle-condition/query-record', protocol: '' },
    { icon: icon1, visible: true, text: '我的钱包', path: '/wallet', protocol: '' },
    { icon: icon5, visible: true, text: '申请开票', path: '/invoice', protocol: '' },
    { icon: icon5, visible: true, text: '申请退款', path: 'refund', protocol: '' },
    // { icon: icon2, visible: true, text: '关于我们', path: '/protocol', protocol: 'ABOUT_INFO' },
    { icon: icon3, visible: true, text: '隐私协议', path: '/protocol', protocol: 'PRIVACY_AGREEMENT' },
    { icon: icon4, visible: true, text: '用户协议', path: '/protocol', protocol: 'USER_AGREEMENT' }
])
//确认弹窗
const confirmPopup = reactive({
    visible: false,
    title: '确认',
    content: '您确定要退出登录吗？',
    orderId: ''
})

const confirmPopupRefund = reactive({
    visible: false,
    title: '退款提示',
    content: '如需退款，请联系客服：400-666-666',
    orderId: ''
})

//页面跳转
const onSkip = (index: number) => {
    if (list[index].protocol === '') {
        if (list[index].path === 'refund') {
            //
            // CxlMessage.info('如需退款，请联系客服：400-666-666')
            confirmPopupRefund.visible = true
        } else {
            useJudgeLogin.init(() => {
                router.push(list[index].path)
            })
        }
    } else {
        router.push({ name: 'protocol', params: { type: list[index].protocol } })
    }
}
//用户信息
const userInfo = reactive(storage.get('userInfo') ? JSON.parse(storage.get('userInfo')) : {})
//微信用户信息
const wxUserInfo = reactive(storage.get('wxUserInfo') ? JSON.parse(storage.get('wxUserInfo')) : {})

//退出登录
const onLoginOut = () => {
    http.token = ''
    const timer = storage.get('loginCountDownTimer')
    if (timer) {
        clearInterval(timer)
        storage.clear()
        const resetTime = setTimeout(() => {
            _userStore.reset()
            clearTimeout(resetTime)
        }, 500)
    }

    router.replace('/login')
}
onMounted(() => {
    useWeixinSdk.disableShare()
})
</script>

<style scoped lang="scss">
.personal-center {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--cxl-color-f2f6f8);
    background-image: url('../../assets/images/picture_wd@2x.png');
    background-repeat: no-repeat;
    background-size: 100% auto;

    box-sizing: border-box;
    padding: var(--cxl-size-26) var(--cxl-size-16);
    .info {
        display: flex;
        align-items: center;

        .head-image {
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: var(--cxl-size-12);
            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
        .info-name {
            p {
                font-size: var(--cxl-size-16);
                margin-bottom: var(--cxl-size-10);
                color: var(--cxl-color-white);
            }
            span {
                display: flex;
                align-items: center;

                color: var(--cxl-color-white);
                img {
                    display: block;
                    width: 1rem;
                }
                font-size: var(--cxl-size-14);
            }
        }
    }

    .fn {
        background-color: var(--cxl-color-white);
        box-sizing: border-box;
        padding: var(--cxl-size-16);
        border-radius: var(--cxl-size-6);
        margin-top: calc(var(--cxl-size-12) * 3);
        .item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:not(:last-child) {
                margin-bottom: var(--cxl-size-16);
                border-bottom: 1px solid var(--cxl-color-f0f0f0);
                padding-bottom: var(--cxl-size-16);
            }
            .icon {
                display: flex;
                align-items: center;
                font-size: var(--cxl-size-15);
                img {
                    display: block;
                    width: 2rem;
                    height: auto;
                    margin-right: var(--cxl-size-12);
                }
            }
        }
    }

    .btn {
        margin-top: var(--cxl-size-12);
        margin-bottom: 5rem;
    }
}
</style>
